import Taro, { Component, Config } from '@tarojs/taro'
import { Text, View } from '@tarojs/components'
import './index.scss'
import { formatTime, makePhoneCall } from "@/utils/utils"
import {getOrderExpress} from "@/api/orderApi";

interface IProps {
  info: object
  onChange: any
}


export default class Index extends Component<IProps, {}>  {
  state: any
  props: any
  config: Config = {
    navigationBarTitleText: '订单详情'
  }

  constructor() {
    super(...arguments)
    const { params } = this.$router
    this.state = {
      id: params.id,
      loading: true,
      dataList: []
    }
  }

  componentWillReceiveProps() {
    const { info } = this.props
    if (info.expressNo) {
      getOrderExpress(info.expressNo).then(({ data }) => {
        this.setState({
          dataList: data.list
        })
      }).catch(() => {
        this.props.onChange()
      })
    }
    // this.getInfo()
  }

  // getInfo() {
  //   const list = data.map((item:any) => {
  //     const phones:any = []
  //     let context = item.context.replace(/(0\d{2,3}-\d{7,8})|(1(\d{2})\d{4}(\d{4}))/g, function(phone) {
  //       phones.push(phone)
  //       return '***********'
  //     })
  //     return {
  //       ...item,
  //       phones,
  //       context: context.split('***********')
  //     }
  //   })
  //   this.setState({
  //     dataList: list
  //   })
  // }

  render() {
    const { dataList } = this.state
    return (<View className='detail-page'>
      <View className='result-info'>
        {
          dataList.map((info, key) => {
            const timestamp = Number(new Date(info.time)) / 1000
            const prefixCls = 'info-item'
            return (
              <View key={key} className={prefixCls}>
                <View className={`${prefixCls}__left`}>
                  <View className={`${prefixCls}__date`}>{formatTime(timestamp, 'MM-DD')}</View>
                  <View className={`${prefixCls}__time`}>{formatTime(timestamp, 'HH:mm')}</View>
                </View>
                <View className={`${prefixCls}__status`}>
                  <View className={`${prefixCls}__status-dot`}>
                  </View>
                </View>
                <View className={`${prefixCls}__right`}>
                  {info.status}
                  {/*{info.status.map((str, k) => {*/}
                  {/*  return (*/}
                  {/*    <View key={k}>*/}
                  {/*      {str}*/}
                  {/*      {info.phones[k] && <Text className='phone-text' onClick={() => makePhoneCall(info.phones[k])}>{info.phones[k]}</Text>}*/}
                  {/*    </View>*/}
                  {/*  )*/}
                  {/*})}*/}
                </View>
              </View>
            )
          })
        }
      </View>
    </View>)
  }
}
